<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全球抑郁症患者统计</title>
    <script src="../js/echarts.min.js"></script>
    <script src="./world.js"></script>
    <script src="../js/jquery.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:650px">

</div>

<script type="text/javascript">
    $(function () {

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        // 指定图表的配置项和数据
        var name_title = "全球抑郁症患者统计"
        var mapName = 'world'
        $.getJSON("https://bdapi.gxist.cn/api/country-depressed-per", function (values) {
            var arr = [];
            for (var i = 0; i < values["data"].length; i++) {
                arr.push({
                    "name": values["data"][i]["country"],
                    "value": values["data"][i]["average_depression_ratio"] / 10
                });
            }
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        var toolTiphtml = ''
                        if (isNaN(params.value)) {
                            toolTiphtml = params.name + '无数据';
                        } else {
                            params.value = params.value.toFixed(2);
                            toolTiphtml = params.name + '抑郁比例: ' + params.value + '%';
                        }
                        return toolTiphtml;
                    }
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    show: true,
                    left: 'left',
                    top: 'top',
                    seriesIndex: [0],
                    type: 'piecewise',
                    pieces: [
                        {min: 3.5, color: 'rgb(83, 91, 213)', label: '抑郁症患者比例 > 3.5%'},     // 较深的蓝色
                        {min: 3, max: 3.5, color: 'rgb(105, 122, 228)', label: '抑郁症患者比例 3 - 3.5%'},
                        {min: 2, max: 3, color: 'rgb(117, 152, 240)', label: '抑郁症患者比例 2 - 3%'},
                        {min: 1, max: 2, color: 'rgb(146, 186, 255)', label: '抑郁症患者比例 1 - 2%'},
                        {min: 0, max: 1, color: 'rgb(223, 230, 255)', label: '抑郁症患者比例 < 1%'}  // 浅蓝色
                    ],
                    textStyle: {
                        color: '#FFFFFF'
                    }
                },
                geo: {
                    show: true,
                    map: mapName,
                    label: {
                        normal: {
                            show: false,
                            fontSize: 12,
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: 'rgb(255,255,255)',
                            // borderColor: '#666666',
                        },
                        emphasis: {
                            areaColor: '#111bb2',
                        }
                    }
                },
                series: [
                    {
                        type: 'map',
                        map: mapName,
                        geoIndex: 0,
                        animation: false,
                        data: arr
                    },
                ]
            };

            option && myChart.setOption(option);

        })
    })
</script>
</body>
</html>